<!--  -->
<template>
  <div class="container">
    <Nav title="参与详情">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="join_con">
      <Scroll
        :preventDefault="true"
        :click="false"
        :tap="true"
        :pullup="true"
        :pulldown="true"
        @scrollToEnd="scrollToEnd"
        :data.sync="attendList"
        ref="myScroll"
      >
        <div>
          <div class="body mt-18">
            <div class="product-name ellipsis-line2">{{activityDetail.name}}</div>
            <img class="product-img mt-14" :src="activityDetail.image" alt="">
            <!-- 进度条 -->
            <div class="progress-wrapper mt-16">
              <div class="progress" :style="{width:activityDetail.progress+'%'}"></div>
            </div>
            <div class="flex mt-10 justify-between aligin-center f-14 pb-10">
              <div class="flex aligin-center">
                <span class="power"></span>
                <span>{{activityDetail.current}}</span>
              </div>
              <div class="flex aligin-center">
                <span class="receive-count"></span>
                <span>{{activityDetail.power}}</span>
              </div>
            </div>
          </div>
          <div>
            <template v-for="(item,index) in attendList">
              <div class="join_con_item show_public" :key="index">
                <div class="join_con_top flex justify-between pt-8 pl-10 aligin-center">
                  <img :src="item.avatar" alt="">
                  <span class="pl-8 ellipsis max-w-140 mr-auto">{{item.nick_name}}</span>
                  <span class="mr-14">{{item.updated_time}}</span>
                </div>
                <div class="join_con_bottom">
                  <div class="join_con_btmdetail flex pr-12 justify-between">
                    <div>获得活动号码：{{item.power}}</div>
                    <div>
                      购买了
                      <span class="color-red">{{item.number}}</span>件商品
                    </div>
                  </div>
                  <div class="join_con_btmgoods">
                    <template v-for="(item,index) in item.goods_thumb">
                      <img :src="item.pic_cover_small" alt="" :key="index">
                    </template>
                  </div>
                </div>
              </div>
            </template>
            <div class="no-data" v-if="attendList.length==0"></div>
            <div class="loading-bottom mt-10 f-14" v-if="loading">加载中...</div>
            <div class="loading-bottom mt-10 f-14" v-if="noMore&&attendList.length">没有更多了</div>
          </div>
        </div>
      </Scroll>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import Page from "../../mixin/page";
import Scroll from "../../components/Scroll";
import { activityJoin } from "../../api/api";
export default {
  mixins: [Page],
  components: { Nav, Scroll },
  data() {
    return {
      activityDetail: {},
      attendList: [] //参与列表
    };
  },
  computed: {},
  watch: {},
  methods: {
    _api() {
      activityJoin({
        page: this.current_page + 1,
        key: this.$route.params.key
      }).then(({ data: { result } }) => {
        this.activityDetail = result;
        if (result.list && result.list.length != 0) {
          this.attendList = [...this.attendList, ...result.list];
          this.current_page += 1;
          this.last_page = this.current_page + 1;
        } else {
          this.last_page = this.current_page;
        }
        this.loading = false;
      });
    }
  },
  created() {},
  mounted() {
    this._api();
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类
.max-w-140 {
  max-width: 140px;
}
.container {
  height: 100%;
}
.flex-end {
  justify-content: flex-end;
}
.join_con {
  overflow: hidden;
  box-sizing: border-box;
  height: calc(100% - 45px);
}
.join_con_top img {
  width: 28px;
  height: 28px;
  border-radius: 100%;
}
.join_con_bottom {
  margin-left: 46px;
}
.join_con_btmgoods img {
  width: 50px;
  height: 50px;
  padding: 16px 9px 10px 0;
}
.loading-bottom {
  width: 100%;
  text-align: center;
}
.body {
  padding: 0 15px 10px 15px;
  box-sizing: border-box;
  .product-name {
    height: 40px;
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
  }
  .product-img {
    width: 100%;
    height: 200px;
    border-radius: 5px;
  }
  .progress-wrapper {
    position: relative;
    width: 100%;
    height: 6px;
    background: #eee;
    border-radius: 3px;
  }
  .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    .bg-1();
  }
  .power {
    display: inline-block;
    width: 17px;
    height: 17px;
    .bg-image("../../assets/imgs/power-red");
    background-size: 100% 100%;
  }
  .receive-count {
    display: inline-block;
    width: 15px;
    height: 15px;
    .bg-image("../../assets/imgs/receive-red");
    background-size: 100% 100%;
  }
  .color-red {
    color: #f3515a;
  }
  .line-height-19 {
    line-height: 19px;
  }
}
</style>